Text accumulates: letters become words, words become sentences, sentences become paragraphs. Each choice in the design of a letter gets repeated thousands of times in a block of text, so when it comes to reading, typeface selection goes the furthest in setting the visual atmosphere.

What atmosphere do we want? Now is a good time to revisit the aesthetic goals I lined up in a previous post:

• Make it look like a place to keep records
• Elevated defaultness
• Lightness
• Whim

Of these, “elevated defaultness” provides the most guidance in our typeface selections because we can use web standard fonts as guides—Times New Roman, Georgia, Verdana, Courier, Monaco, San Francisco, Helvetica, and the like. But, I want to have my own spin on these common typefaces without going too far afield in the look of my font selections. (By the way, I am going to use font and typeface interchangeably in my writing. There used to be significant reasons for the distinction, but much like the difference between records and albums in music, digital technology and democratized access makes those distinctions increasingly insignificant.)

If we were working on a different kind of project (let’s say a visual identity project), we’d be hunting for typefaces that support the communication tone we’ve established as a cornerstone of the brand, all the while making sure that those selections work well in the different applications necessary for the business. Material (the typeface) meets format (its application) to express atmosphere (the tone).

A quick example: last year, I was working with a financial company who was focused on friendly, conversational communication and high-touch support. They had a web app and intentions to make a native mobile app in the next year or so. Most of the views in the web app were tables of transactions and their details. For their primary body typeface, we selected National 2 for its friendly character, memorable numerals, and narrow proportions. These characteristics would give a pleasing information density to their table views, anticipate their upcoming design needs with narrow mobile screens, and make the numerals in the table a satisfying sight—highly legible, but with a bit of flair. Too often, brand typefaces are selected for their visual panache and communicative tone without enough regard to the utilitarian contexts where the typefaces will be used. Both need to be considered, and the right typeface can elegantly serve both needs.

After a quick click-through of my site to define my needs (a lazy man’s content audit), I identified a few kinds of content and some typographic associations I make with them:

• Extended reading: long essays. Best as serif to be readerly, but careful to not be too bookish. (Any serif with a small x-height seems too bookish and stuffy to me. Scar tissue from a fascination with Bembo as a student, year and years ago.) Sans can be used for running text, but my preference swings to serif for my site. And yes, I see the irony if you are reading this on the “undesigned” version of the site that uses sans-serif body text. ¯\_(ツ)_/¯
• Interface & data: navigation and text that exists more as a list to be skimmed than a paragraph to be read (see the Reading and Listening pages). Sans-serif is an intuitive choice here, because it doesn’t have quite so many associations with “readerliness.”
• Labeling: meta data and the like. Could be set in the same sans-serif as interface or possibly as a monowidth, reminiscent of the typewriter text on card catalog entries. (“Make it look like a place to keep records”). Strong preference to serif monowidth vs sans-serif, because I don’t want to suggest the aesthetics of code.
• Headlines: could be anything really, because I’m not trying to create a distinctive character with display type. (“Elevated defaultness.”) The selected sans or serif should be able to be used for headlines, but my resulting design using them will probably need to have moderate size contrast between the body size and headlines, since many fonts designed for running text work poorly at display sizes. This is natural: display and body contexts have different needs in the letterforms. Text typefaces used at display sizes often look clunky—too little contrast in stroke weight, too loose letterspacing (which can be adjusted, however), and excessively tall ascenders and descenders. But not all, so that’s what we’ll be wanting.

I’m still not entirely certain how these typefaces will get used in the design (I’d like to avoid the boilerplate “serif for body copy and sans-serif for headlines” if I can), but now we have a starting place for what kinds of typefaces to seek out and try.

• Serif: something Caslon-ish, Georgia-y, or Times-esque. Even though these are different classifications of serif typefaces, they hold together as a list, because I’m looking for the quotidian—something “normal” without much of an evident hand in the design. All the while, I’ll need a design that’s suitable for extended reading. Optimal at sizes between 16px and 20px.
  • Little aside here: I am not in favor of body text above 20px-ish unless the user specifies it in their browser settings. Over-large body text sizes prohibits smooth eye movement across the textblock, and this friction compounds if the reader must scroll more often due to the larger text. In my opinion, type size should be primarily defined by the reader’s distance to the device, not the size of the device. The full width of a text block should be able to be comfortably seen at a glance and not extend into the periphery. A 27-inch desktop screen read from two feet away has very similar typographic needs to a 13-inch laptop read from the same distance. My first move on big screens is modifying the layout to address the additional space, not necessarily changing the type size or re-setting the text block.
• Sans-serif: probably a neo-grotesk, rational but not sterile. Optimal at sizes between 13px and 18px. (Less common than you may think.) Perhaps will also be using this typeface for headlines, so should look good at sizes over 24px, too. (Don’t worry, we’ll be specifying a type scale and proportional sizing later.) The potential use at large and small sizes means that uniformity and alignment inside of the character designs (e.g. ascenders and descenders aligning with the cap height) may be useful for a more refined presentation at large sizes.
• Monowidth serif: for meta data, used at small sizes. (14-16px). Might be the best opportunity to get a little playful wonkiness into the design.

Sans, serif, mono. Not bracingly original, but hey, I call it the perfecta trifecta for a reason. My only additional consideration is a strong preference to buy from small, independent foundries. This will help focus selection and make the source of my design materials match the independent spirit of this site.

Beyond that, I don’t think it’s necessary to have further definition. No matter how much one plans, a designer will crawl through their mental rolodex of fonts and see what feels right to their eye. Post-rationalization is an open secret in the design industry, but with personal work, there is no one to impress with rigor. One can go on intuition. The eye knows.

That’s long enough for now. Next time we’ll look at some fonts.